<template>
	<view class="ucenter-page">
		<u-navbar title-size="36"  height="42" :border-bottom="false" title="贡献详情"></u-navbar>
		<view class="content">
			<view class="u-cells">
				<view class="u-cell" v-for="(res, index) in list" :key="index">
					<view class="u-cell-top">
						<view class="u-cell-title flex_bd ellipsis"><text class="tj">好友推荐成交</text>{{res.title}}</view>
						<view class="price">¥{{res.price}}</view>
					</view>
					<view class="u-cell-tags">
						<view class="tag" v-for="(item, index) in res.tags" :key="index">{{item}}</view>
					</view>
					<view class="u-cell-bt">
						<view class="u-cell-time">{{res.time}}</view>
						<view class="u-cell-state">{{res.state}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					title: '线索 UB20091910',
					price: 2000,
					tags: ['ZE205E-10','6台','分佣比例10%'],
					time: '2021-05-19',
					state:'待处理'
					
				}, {
					title: '线索 UB20091019',
					price: 2000,
					tags: ['ZE205E-10','6台','分佣比例10%'],
					time: '2021-05-19',
					state:''
				}],
			}
		},
		onLoad() {

		},
		methods: {
			openUrl(e) {
				console.log(e)
				uni.navigateTo({
					url: e
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.content {
		padding: 24rpx 32rpx;
	}

	.u-cell {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		padding: 32rpx;

		.u-cell-top {
			display: flex;
			align-items: center;

			.u-cell-title {
				font-size: 28rpx;
				color: #383842;
				
				.tj{
					font-weight: 600;
					margin-right: 8rpx;
				}
			}

			.price {
				font-size: 36rpx;
				color: #FE6714;
				margin-left: 60rpx;
			}
		}

		.u-cell-tags {
			margin-bottom: 20rpx;

			.tag {
				display: inline-block;
				font-size: 22rpx;
				color: #A2C833;
				border: 2rpx solid #A2C833;
				height: 36rpx;
				background: rgba(162, 200, 51, 0.08);
				padding: 0 8rpx;
				border-radius: 6rpx;
				line-height: 32rpx;
				margin-right: 10rpx;
			}
		}

		
		.u-cell-bt{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.u-cell-time {
				font-size: 24rpx;
				color: #9C9C9C;
			}
			
			.u-cell-state{
				font-size: #606366;
				font-size: 24rpx;
			}
		}
		
	}

</style>
